<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>登录 - 业务管理系统</title>

  <!-- Material Design Icons -->
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">

  <!-- Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <!-- Vuetify 3 -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script>

  <style>
    .login-layout {
      min-height: 100vh;
      background-color: #f0f2f5;
    }
    .login-card {
      max-width: 500px;
      width: 100%;
      margin: 0 auto;
    }
    .app-bar {
      background: linear-gradient(to right, #43A047, #66BB6A) !important;
    }
    .theme-toggle {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
    }
    
  </style>

  <!-- CSRF Token -->
  {% csrf_token %}
</head>
<body>
  <div id="app">
    <v-app>
      <!-- 顶部导航栏（绿色主题） -->
      <v-app-bar color="primary" dark>
        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
        <v-app-bar-title>My Django App</v-app-bar-title>

      </v-app-bar>

      <!-- 主内容区 -->
      <v-main class="login-layout d-flex align-center justify-center">
        <v-card class="login-card pa-8" elevation="8" rounded="lg">
          <!-- 标题 -->
          <div class="text-center mb-6">
            <h2 class="text-h5 font-weight-bold">欢迎登录</h2>
            <p class="text--secondary mt-2">请输入您的账户信息以继续</p>
          </div>

          <!-- 登录表单（使用原生 form 提交，不依赖 JS） -->
          <form method="post" action="/login/">
            {% csrf_token %}

            <!-- 错误提示（Django 渲染） -->
            {% if form.non_field_errors %}
              <v-alert type="error" density="compact" class="mb-6">
                {{ form.non_field_errors }}
              </v-alert>
            {% endif %}

            <!-- 用户名 -->
            <v-text-field
              name="username"
              label="用户名"
              placeholder="请输入用户名"
              variant="outlined"
              prepend-icon="mdi-account"
              clearable
              class="mb-4"
              required
            ></v-text-field>

            <!-- 密码 -->
            <v-text-field
              name="password"
              label="密码"
              placeholder="请输入密码"
              variant="outlined"
              prepend-icon="mdi-lock"
              type="password"
              clearable
              class="mb-6"
              required
            ></v-text-field>

            <!-- 记住我 -->
            <v-checkbox
              name="remember"
              label="记住我"
              color="primary"
              hide-details
              class="mt-2"
            ></v-checkbox>

            <!-- 登录按钮（原生 submit） -->
            <v-btn
              type="submit"
              color="primary"
              block
              size="large"
              class="mt-6"
              min-height="48"
            >
              登录
            </v-btn>
          </form>

          <!-- 页脚 -->
          <div class="text-center mt-8 text--secondary">
            <small>&copy; 2025 业务管理系统. 保留所有权利.</small>
          </div>
        </v-card>
      </v-main>
    </v-app>
  </div>

  <script>
    const { createApp } = Vue;

    // 绿色主题（与业务页面一致）
    const lightTheme = {
      dark: false,
      colors: {
        background: '#FFFFFF',
        surface: '#FFFFFF',
        primary: '#43A047',     // 绿色主色
        secondary: '#5C6BC0',
        accent: '#8D6E63',
        error: '#EF5350',
        info: '#29B6F6',
        success: '#66BB6A',
        warning: '#FFB74D',
      }
    };

    const darkTheme = {
      dark: true,
      colors: {
        background: '#121212',
        surface: '#212121',
        primary: '#4DB6AC',
        secondary: '#7E57C2',
        accent: '#BDBDBD',
        error: '#EF9A9A',
        info: '#4FC3F7',
        success: '#81C784',
        warning: '#FFD54F',
      }
    };

    // 创建 Vuetify 实例
    const vuetify = Vuetify.createVuetify({
      theme: {
        defaultTheme: 'lightTheme',
        themes: {
          lightTheme,
          darkTheme
        }
      }
    });

    // 创建 Vue 应用（仅用于主题切换）
    const app = createApp({
      data() {
        return {
          theme: 'lightTheme'
        };
      },
      methods: {
        toggleTheme() {
          this.theme = this.theme === 'lightTheme' ? 'darkTheme' : 'lightTheme';
          this.$vuetify.theme.name = this.theme;
        }
      }
    });

    // 使用 Vuetify
    app.use(vuetify);
    app.config.globalProperties.$vuetify = vuetify;

    // 挂载
    app.mount('#app');
  </script>
</body>
</html>